<template>
    <div class="page">
        <div class="flexWrap pageTop">
            <div class="flexWrap filter-bar">
                <img src="../../assets/img/filter.png" />
                <span class="title">筛选：</span>
            </div>
            <el-input style="width: 250px; transform:scale(0.9)" size="mini" clearable placeholder="任务名称" v-model="filter.keyword" @change="toFilter"/>

            <el-select clearable class="mini-el" style="width: 160px" size="small" v-model="filter.status" placeholder="选择状态"  @change="toFilter">
                <el-option v-for="s in filter.statusAry" :key=s.id :label=s.name :value=s.id />
            </el-select>
            <el-checkbox size="mini" style="transform:scale(0.9);margin: 5px 20px 0 0" v-model="filter.onlyMe" @change="toFilter">只看跟我相关</el-checkbox>
            <el-button type="" plain size="mini" style="transform:scale(0.8)" icon="el-icon-circle-plus" @click="toCreate">新增</el-button>
            <el-button type="" plain size="mini" style="transform:scale(0.8)" icon="el-icon-refresh" @click="toFilter">刷新</el-button>
        </div>
        <div class="pageCenter">
            <el-table :data="list" stripe size="medium" height="calc(100vh - 140px)" :cell-style="{padding:'10px 0'}" @sort-change="toSort">
                <el-table-column prop="id" label="ID" width="80" sortable />
                <el-table-column prop="leaderName" label="责任人" width="100" sortable />
                <el-table-column label="状态" width="80" sortable>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 1" type="">待处理</el-tag>
                        <el-tag v-else-if="scope.row.status == 20" type="">处理中</el-tag>
                        <el-tag v-else-if="scope.row.status == 30" type="">测试中</el-tag>
                        <el-tag v-else-if="scope.row.status == 100||scope.row.status == 110"  type="success">已完成</el-tag>
                        <el-tag v-else  type="danger">已废弃</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="优先级" width="90" sortable>
                    <template slot-scope="scope">
                        <template v-if="scope.row.p == 1">
                            <el-tag type="danger">P0紧急</el-tag>
                        </template>
                        <template v-else-if="scope.row.p == 2">
                            <el-tag type="warning">P1高</el-tag>
                        </template>
                        <template v-else-if="scope.row.p == 3">
                            <el-tag>P2一般</el-tag>
                        </template>
                        <template v-else>
                            <el-tag type="info">P3低</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="" width="40" align="right">
                    <template slot-scope="scope">
                        <div class="flexWrap">
                            <el-tooltip content="点击完成任务" placement="top">
                                <el-checkbox v-model="scope.row.done" @change="toDone(scope.row)"  class="done-btn"></el-checkbox>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="任务内容" min-width="100" />
                <el-table-column prop="deadlineStr" label="截止日期" width="120" sortable />
                <el-table-column prop="doneAtStr" label="完成日期" width="120" sortable />
                <el-table-column label="操作" width="130" >
                    <template slot-scope="scope">
                        <el-button type="text" v-on:click.stop="toEdit(scope.row)">修改</el-button>
                        <el-button type="text" v-on:click.stop="toDemand">需求详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pageBottom flexWrapCenter">
            <el-pagination small @current-change="tblCurPageChanged"
                           layout="total, prev, pager, next, jumper"
                           :page-size="tbl.size" :total="tbl.total" />
        </div>

        <!--详情页-->
        <el-dialog :visible.sync="edit.show" top="5vh" width="600px" append-to-body border :show-title=false :show-close=false>
            <job-edit v-if="edit.show" :info="edit.info" saveOk @complete="edit.show = false; fetchList()" />
        </el-dialog>

        <!--详情-->
        <el-drawer
            title="详情"
            :size=1400
            :visible.sync="demand.show"
            :with-header="false"
            @close="fetchList"
            append-to-body border :show-title=false :show-close=false
        >
            <demand v-if="demand.show" :info="demand.info" @complete="demand.show = false;" />
        </el-drawer>
    </div>
</template>

<script>
import JobEdit from "@/views/job/components/jobEdit"
import Demand from '@/views/demand/demand'
export default {
    data: function(){
        return {
            me:{},
            filter:{
                keyword: "",
                status:'', statusAry:[{id:1, name:'待处理'},{id:20, name:'处理中'},{id:30, name:'测试中'},{id:100, name:'已完成'},{id:-1, name:'已废弃'}],
                onlyMe:true
            },

            tbl:{total:0, size:30, curr:1},
            list:[],

            edit:{show:false, info:{}},
            demand:{show:false, info:{}},
        }
    },
    components: {
        JobEdit,Demand
    },
    created() {
        this.me = this.auth.getAccount();
        this.fetchList();
    },
    methods: {
        /**************** 动作 ****************/
        tblCurPageChanged(v) {
            this.tbl.curr = v;
            this.fetchList();
        },
        toFilter() {
            if (this.$refs.filterTable && this.$refs.filterTable.clearFilter) this.$refs.filterTable.clearFilter()
            this.tbl.sort = ''
            this.tbl.curr = 1
            this.fetchList()
        },
        toCreate() {
            this.edit = {show:true, info:{editable:true}}
        },
        toEdit(row) {
            if (row.status == 2) {
                this.$message.warning({message:"任务已完成，不可编辑", duration:600});
                return
            }
            this.edit = {show:true, info: {...row}}
        },
        toDone(row) {
            if (row.status == 100 || row.status == 110) {
                this.$message.warning({message:"该任务已完成", duration:600});
                return
            }

            if (row.leader != this.me.id) {
                this.$message.warning({message:"不可修改他人任务", duration:600});
                return
            }

            row.status = 100
            this.request.post({
                url: "job.save", data: row
            }).then(res => {
                this.fetchList()
            },res => {
                this.$message.error(res.msg || '保存失败')
            })
        },
        toDemand(row) {
            if (row.demandId > 0) {
                this.demand = {show:true, info:{id:row.demandId}}
            } else {
                this.$message.warning({message:"该任务未关联需求", duration:600});
            }
        },
        toSort(e) {
            let keys = {id:"id", p:"p", deadlineStr:"deadline",status:"status",doneAtStr:"doneAt", content:"content", leader:"leader"}
            this.tbl.sort = ""
            if (e.order && e.prop) {
                if (e.order === 'ascending') {
                    this.tbl.sort = keys[e.prop] + "__" + "asc"
                } else if (e.order === 'descending') {
                    this.tbl.sort = keys[e.prop] + "__" + "desc"
                }
            }

            this.fetchList()
        },
        fetchList() {
            let params = {
                size:this.tbl.size, page:this.tbl.curr, sort:this.tbl.sort,
                status:this.filter.status, keyword:this.filter.keyword, onlyMe:this.filter.onlyMe
            }
            this.request.get({
                url: "job.list",
                data: params
            }).then(res => {
                this.list = res.result || [];
                this.tbl.total = (res && res.totalCount) ? res.totalCount : this.list.length;

                for(let i = 0; i < this.list.length; i ++) {
                    this.format.job(this.list[i])
                }
            },res => {
                this.$message.error(res.msg || "获取数据失败~");
            })
        }
    }
}
</script>

<style scoped>
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #eeeeee;
}

.done-btn {
    margin-right: 15px;
}
</style>
